<script>
import outMain from "@/components/outMain.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ShipAdd, ShipEdit, ShipShow, checkFleet, checkCrew } from "@/http/api";

export default {
  components: { outMain },
  name: "",
  data() {
    return {
      detailId: this.$route.query.id,
      formData: {
        ship_name: "",
        qh: "",
        zcsj: "",
        hh: "",
        imo: "",
        cblx: "",
        cbhq: "",
        zhl: "",
        fleet_id: "",
        crew_ids: [],
      },
      fleetArr: [],
      bootLineType: [],
      bootType: [],
      bootArr: [],
      rules: {
        ship_name: [
          {
            required: true,
            message: "请输入船队名称",
            trigger: "blur",
            min: 0,
            max: 20,
          },
        ],
      },
    };
  },
  props: {},
  setup() {},
  methods: {
    addBootList() {
      this.formData.crew_ids.push({ id: "" });
    },
    delBootFn(index) {
      this.formData.crew_ids.splice(index, 1);
    },
    backFn() {
      this.$router.back();
    },
    getYearTime(time) {
      const y = time.getFullYear();
      const str = `${y}`;
      return str;
    },
    async saveFn() {
      const valid = await this.$refs.ruleForm.validate();
      if (!valid) {
        return;
      }
      const queryData = { ...this.formData };
      let idsArr = this.formData.crew_ids.filter((item) => {
        return item.id;
      });
      if (idsArr.length > 0) {
        let ids = idsArr.map((item) => {
          return item.id;
        });
        queryData.crew_ids = Array.from(new Set(ids)).join(", ");
      } else {
        queryData.crew_ids = "";
      }

      if (typeof queryData.zcsj == "object") {
        queryData.zcsj = this.getYearTime(queryData.zcsj);
      }
      const { data } = this.detailId
        ? await ShipEdit(queryData)
        : await ShipAdd(queryData);
      if (data.code == 1) {
        ElMessage({
          type: "success",
          message: this.detailId ? "编辑成功" : "新增成功",
        });
        setTimeout(() => {
          this.$router.back();
        }, 1000);
      }
    },
    getData() {
      ShipShow({ shipowner_ship_id: this.detailId }).then((res) => {
        if (res.data.code == 1) {
          let resData = res.data.data;
          if (resData.crew_ids) {
            resData.crew_ids = resData.crew_ids.split(",").map((item) => {
              return { id: Number(item) };
            });
          } else {
            resData.crew_ids = [];
          }
          delete resData.fleet_name;
          delete resData.bind_crew;
          this.formData = resData;
          this.formData["shipowner_ship_id"] = this.detailId;
        }
      });
    },
    getFeelt() {
      checkFleet().then((res) => {
        if (res.data.code == 1) {
          this.fleetArr = res.data.data;
        }
      });
    },
    getBoot() {
      checkCrew().then((res) => {
        if (res.data.code == 1) {
          this.bootArr = res.data.data;
        }
      });
    },
  },
  mounted() {},
  async created() {
    await this.getFeelt();
    await this.getBoot();
    this.bootType = await this.$getCate.getCateFn(1);

    this.bootLineType = await this.$getCate.getCateFn(2);
    if (this.detailId) {
      this.getData();
    }
  },
};
</script>
<template>
  <outMain>
    <div class="formCont">
      <div class="formHead">
        <div>{{ detailId ? "编辑" : "新增" }}船舶</div>
        <btn value="返回上一级" @ok="backFn"></btn>
      </div>
      <div class="formMain">
        <el-form
          :rules="rules"
          label-width="120"
          :model="formData"
          ref="ruleForm"
        >
          <div class="flexCont">
            <el-form-item label="船舶名称" prop="ship_name">
              <el-input
                clearable
                placeholder="请输入船舶名称"
                v-model="formData.ship_name"
              />
            </el-form-item>
            <el-form-item label="旗号" prop="qh">
              <el-input
                clearable
                placeholder="请输入旗号"
                v-model="formData.qh"
              />
            </el-form-item>
            <el-form-item label="呼号" prop="hh">
              <el-input
                clearable
                placeholder="请输呼号"
                v-model="formData.hh"
              />
            </el-form-item>
            <el-form-item label="imo" prop="imo">
              <el-input
                clearable
                placeholder="请输入imo"
                v-model="formData.imo"
              />
            </el-form-item>
            <el-form-item label="船舶类型" prop="cblx">
              <el-select
                filterable
                clearable
                allow-create
                v-model="formData.cblx"
                placeholder="请选择船舶类型"
              >
                <el-option
                  v-for="item in bootType"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="船舶航区" prop="cbhq">
              <el-select
                filterable
                allow-create
                clearable
                v-model="formData.cbhq"
                placeholder="请选择船舶航区"
              >
                <el-option
                  v-for="item in bootLineType"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="造船时间" prop="zcsj">
              <el-date-picker
                clearable
                v-model="formData.zcsj"
                type="year"
                style="width: 100%"
                placeholder="请选择造船时间"
              />
            </el-form-item>
            <el-form-item label="载货量" prop="zhl">
              <el-input
                clearable
                placeholder="请输入载货量"
                v-model="formData.zhl"
              />
            </el-form-item>
            <el-form-item label="所属船队" prop="fleet_id">
              <el-select
                v-model="formData.fleet_id"
                clearable
                filterable
                placeholder="请选择所属船队"
              >
                <el-option
                  v-for="item in fleetArr"
                  :key="item.shipowner_fleet_id"
                  :label="item.fleet_name"
                  :value="item.shipowner_fleet_id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="关联的船员" class="flexPull" prop="crew_ids">
              <div class="addBootItem">
                <btn value="新增船员" @ok="addBootList"></btn>
              </div>
              <div class="customCont">
                <div
                  class="customItem flexPull"
                  :key="index"
                  v-for="(item, index) in formData.crew_ids"
                >
                  <div class="customTd">
                    <el-select
                      v-model="item.id"
                      clearable
                      filterable
                      placeholder="请选择船员"
                    >
                      <el-option
                        v-for="item in bootArr"
                        :key="item.shipowner_crew_id"
                        :label="item.real_name"
                        :value="item.shipowner_crew_id"
                      />
                    </el-select>
                  </div>
                  <btnPlain value="删除船员" @ok="delBootFn(index)"></btnPlain>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="flexPull" label=" ">
              <btn
                :value="detailId ? '保存船舶信息' : '确认新增此船'"
                @ok="saveFn"
              ></btn>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>
  </outMain>
</template>
<style scoped lang="less"></style>
